<template>
  <div>
    <div class="el-input_head">
      <el-input
        v-model="inputRole.name"
        class="roleAddInput el-input_add"
        placeholder="请输入角色英文名"
        @keydown.enter.native="doRoleAdd"
      >
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input
        v-model="inputRole.nameZh"
        class="roleAddInput el-input_add"
        placeholder="请输入角色中文名"
        suffix-icon="el-icon-plus"
        @keydown.enter.native="doRoleAdd"
      ></el-input>
      <el-button type="primary" icon="el-icon-plus" @click="doRoleAdd"
        >添加
      </el-button>
    </div>
    <div>
      <el-collapse
        style="width: 60%;"
        v-model="activeName"
        @change="roleCollapseChange"
        accordion
      >
        <el-collapse-item :name="r.id" v-for="(r, index) in roles" :key="index">
          <template slot="title">
            <p class="roleCollapse">{{ r.nameZh }}</p>
          </template>
          <div>
            <el-card v-loading="menusLoading" class="box-card">
              <div slot="header" class="clearfix">
                <span>{{ r.nameZh }}可访问资源</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="danger"
                  @click="doRoleDelete(r)"
                  >删除角色</el-button
                >
              </div>
              <el-tree
                :data="allMenus"
                node-key="id"
                :key="index"
                ref="tree"
                show-checkbox
                :default-checked-keys="selectedMidByRid.Mid"
                :default-expanded-keys="selectedMidByRid.Mid"
                :props="defaultProps"
              >
              </el-tree>
              <div style="display: flex; justify-content: flex-end">
                <el-button @click="cancleUpdate">取消修改</el-button>
                <el-button type="primary" @click="doRoleMenuUpdate(r.id, index)"
                  >确认修改</el-button
                >
              </div>
            </el-card>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "PermissMana",
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {
      //后端获取的全部菜单
      allMenus: {},
      //后端获取的角色菜单
      roleMenus: {},
      //后端获取的角色信息
      roles: {},
      //前端发送的permiss角色信息
      inputRole: {
        name: "",
        nameZh: ""
      },
      //更新窗口绑定数据用的角色信息
      updateRole: {
        name: "",
        nameZh: ""
      },
      //dialog弹窗
      dialogFormVisible: false,
      //checkbox勾选的行内数据
      multipleSelectionPM: [],
      //菜单树配置项
      defaultProps: {
        children: "children",
        label: "name"
      },
      //选中的菜单id
      selectedMidByRid: {
        rid: "",
        Mid: []
      },
      menusLoading: false,
      activeName: ""
    };
  },
  computed() {},
  //方法集合",
  methods: {
    //展开折叠面板
    roleCollapseChange(rid) {
      if (rid) {
        this.initSelectedMidByRid(rid);
      }
      this.initAllMenus();
    },
    //根据角色id查询菜单id
    initSelectedMidByRid(rid) {
      this.menusLoading = true;
      this.selectedMidByRid.Mid = [];
      this.getRequest("/system/basic/permiss/mid/" + rid)
        .then(resp => {
          if (resp) {
            this.selectedMidByRid.Mid = resp;
          }
          this.menusLoading = false;
        })
        .catch(() => {});
    },
    //初始化角色菜单信息
    initAllMenus() {
      this.getRequest("/system/basic/permiss/menus").then(resp => {
        if (resp) {
          this.allMenus = resp;
        }
      });
    },
    //初始化角色信息
    initRoles() {
      this.getRequest("/system/basic/permiss/").then(resp => {
        if (resp) {
          this.roles = resp;
        }
      });
    },
    //添加方法
    doRoleAdd() {
      if (this.inputRole.name && this.inputRole.nameZh) {
        this.postRequest("/system/basic/permiss/", this.inputRole)
          .then(resp => {
            if (resp) {
              this.initRoles();
              this.inputRole.name = "";
              this.inputRole.nameZh = "";
            }
          })
          .catch(() => {});
      } else {
        this.$message.error("名称不能为空");
      }
    },
    //更新角色菜单权限
    doRoleMenuUpdate(rid, index) {
      // let updateRoleMenus = this.$refs.tree[index].getCheckedKeys(true, false);
      // true表示只获取叶子节点
      let checkedMenus = this.$refs.tree[index].getCheckedKeys(true);
      let url = "/system/basic/permiss/?rid=" + rid;
      checkedMenus.forEach(key => {
        url += "&mids=" + key;
      });
      this.putRequest(url).then(resp => {
        if (resp) {
          this.initAllMenus();
          this.activeName = -1;
        }
      });
    },
    cancleUpdate() {
      this.activeName = -1;
    },
    //删除角色
    doRoleDelete(roleData) {
      this.$confirm(
        "此操作将永久删除角色 [" +
          roleData.nameZh +
          "(" +
          roleData.name +
          +")" +
          "] ,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "waring"
        }
      )
        .then(() => {
          this.deleteRequest("/system/basic/permiss/role/" + roleData.id).then(
            resp => {
              if (resp) {
                this.initRoles();
              }
            }
          );
        })
        .catch(() => {});
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    //初始化全部菜单
    this.initRoles();
  }
};
</script>

<style scoped>
.roleAddInput {
  width: 340px;
}
.roleCollapse {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 18px;
  margin-left: 20px;
  font-weight: bolder;
}
</style>
